<template>
  <div class="content" :style="contentStyle">
    <div  v-for="(item,index) in item.articles"
          :key="index"
          :style="articleStyle(item)">
    </div>
    <!--        角色-->
    <div class="article-options">
        <v-touch v-for="(article,index) in item.optionArticles"
             :key="index + 1000"
             :class="articleClassName(article)"
             :style="articleOptionStyle(article,index)"
             @tap="item.isFinish?null:articleTouch(article,index,$event)">
            <div class="article-name"
                 :style="articleNameStyle(article)">
                {{article.name}}
            </div>
<!--            <Point v-if="!item.operated" :style="pointStyle"/>-->
        </v-touch>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import {mapActions} from "vuex";
// import Point from "../point.vue"
const $ = window.$
export default {
  mixins: [mixins],
  data() {
    return {
      isMove: false,
      hintShowing: true,  //角色放大效果
      touchCount: 0,     //角色点击次数
    }
  },
    // components:{
    //   Point
    // },
  computed: {
      pointStyle(){
          return{
             maxWidth: '60%',
              marginTop: '-4rem',
              marginLeft: '-1.5rem',
              transform: 'rotate(180deg)'
          }
      },
    articleClassName() {
      return function (article) {
        const classNames = ['article-option']
        if (this.hintShowing) classNames.push('enlarge')
        if (article.highlight) classNames.push('active')
        if (article.active) classNames.push('active')
        if (article.isLos) classNames.push('los')
        return classNames
      }
    },
    articleOptionStyle(article,index) {
      return function (article,index) {
        const articleIndex = index - parseInt(article.itemIndex)
        return {
          background: "url(" + article.imageUrl + ")center center/ contain no-repeat",
          right: this.hintShowing ? index * 5 + 'rem' : article.active ? articleIndex * 5 + 'rem' : index * 5 + 'rem',
          opacity: this.hintShowing ? '' : article.active ? '' : '0',
          zIndex: 100 + index
        }
      }
    },
    articleNameStyle(article){
      return function (article) {
        const len = article.name.length
        return {
          fontSize: len === 1 ? '1.3rem' : len === 2 ? '1.2rem' : '1.1rem',
        }
      }
    }
  },
  beforeMount() {
    if (this.item.isFinish) {
      this.hintShowing = false
      return
    } else {
        this.item.operated = false
    }
  },
    created() {
        if(!this.item.isFinish){
            this.item.optionArticles.forEach(item=>{
                this.$set(item,'itemIndex',0)
                this.$set(item,'active',false)
                if(item.isBeforeRole) this.$set(item,'isOption',true)
                if(item.isOption) this.$set(item,'isBeforeRole',true)
            })
        }
    },
    methods: {
    articleTouch: function (article,index,event) {
      if (this.item.isFinish || article.active || article.isLos) {
        return
      }
      this.$set(article,'active',false)
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
      this.parseTextAudio({text: article.name})
      if (article.isBeforeRole) {
        this.sucMusic()
        this.$set(article,'active',true)
        this.$set(article,'isBeforeRole',false)
        for(let i = 0; i < index; i++){
            if(article !== this.item.optionArticles[i] && !this.item.optionArticles[i].isOption) {
                let aIndex = parseInt(article.itemIndex)
                aIndex++
                this.$set(article,'itemIndex',aIndex)
            }
        }
        const len = this.item.optionArticles.filter(item => { return item.isBeforeRole }).length
        if(len === 0) {
          setTimeout(()=>{this.hintShowing = false},10)
            if(this.isSeedEntery){
                this.setSucLottiePlay()
                setTimeout(()=>{
                    this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                },3000)
            }else {
                setTimeout(()=>{
                    this.perfectMusic()
                    this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                },1000)

            }
            this.addAnswer({
                id: this.item.id,
                type: true
            })
        }
      }else {
        this.losMusic()
          if(this.isSeedEntery){
              setTimeout(()=>{this.$emit('nextAssignment')},600)
          } else {
              this.$emit("losShow")
          }
        this.$set(article, 'isLos', true)
        setTimeout(() => {this.$set(article, 'isLos', false)}, 1000)
        this.addAnswer({
          id: this.item.id,
          type: false
        })
        this.touchCount++
        if (this.touchCount > 3) {
          //重读问题
          setTimeout(() => {
            this.setQuestionAudio()
          }, 500)
          $.each(this.item.optionArticles, (index, article) => {
            if (article.isBeforeRole) {
              this.$set(article, 'highlight', true)
              setTimeout(() => {
                this.$set(article, 'highlight', false)
              }, 2000)
            }
          })
        }
      }
    },
    ...mapActions("mainStatus", ["setLoading"])
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.article-options
  position absolute
  transform translate3d(var(--X), var(--Y), 0)
  $coord('WHRB', 38rem, 4rem, 2rem, 2rem)
  z-index 99
  .article-option
    position absolute
    filter grayscale(1)
    width 4rem
    height 4rem
    transition all 1.5s
  .article-name
    position absolute
    $coord('WHLB', 6rem, 1rem, 2rem, 0rem)
    font-weight 500
    text-align start
    line-height 1rem
    color #ffa062
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
  .active
    filter drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))
</style>
